<template>
  <div>
    用户名: <input v-model="username" type="text"><br>
    姓名: <input v-model="user.name" type="text">
    年龄: <input v-model="user.age" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      user: {
        name: '',
        age: ''
      }
    }
  },
  // 侦听器 / 监听器
  watch: {
    // 语法:
    // 要监听的数据(newVal, oldVal) {}
    username(newVal, oldVal) {
      // 只要数据变化, 函数会自动执行
      console.log(newVal, oldVal)
    },
    // 侦听器的完整写法
    // 要监听的数据: {
    //   handler(newVal, oldVal) {},
    //   deep: true // 开启深度侦听
    // }
    // user(newVal) {
    //   // watch 默认情况下不能监听引用数据类型
    //   console.log(newVal)
    // }
    user: {
      handler() {
      // handler(newVal, oldVal) {
        // 注意事项: 在 Vue2 中, newVal 和 oldVal 是一样的, 这是一个官方 Bug
        // 为什么不解决? 因为这个 Bug 不影响开发, 我们在写代码的时候, 几乎所有情况下都使用 newVal
        console.log(this.user) // 跟人比较喜欢直接访问数据, 不接收参数
      },
      deep: true, // 深度侦听
      immediate: true // 立即执行
    }
  }
}
</script>

<style>

</style>